<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./data.js"></script>
  <link rel="stylesheet" href="./css/style.css">
</head>
<body>
  <div class="wrap">
    <div class="question">
      <h2>单选题<span></span></h2>
      <div class="list"></div>
      <button class="submit">提交</button>
    </div>
    <div class="card">
      <div class="card-top">
        <p class="title">答题卡</p>
        <p class="count-down">2:00:00</p>
      </div>
      <div class="num"></div>
    </div>
  </div>
  <div class="dialog"> 
    <div class="dialog-content">
      <img src="./right.jpg" alt="">
      <h4>您的分数为 <span>0</span></h4>
      <button>确定</button>
    </div>
  </div>
  <!-- <script>
    // 选择题结果
    const result = new Array(data.length)
    // 初始化渲染
    function initRender() {
      // 选项
      const optionsLetter = ['A', 'B', 'C', 'D']
      // 计算总分
      const total = data.reduce((prev, val) => prev + val.score, 0)
      // 渲染总分
      $('h2 span').innerHTML = `（共${data.length}题，共${total}分）`
      // 渲染答题卡按钮
      $('.card .num').innerHTML = data.map((item, index) => `<button data-index="${index}">${index + 1}</button>`).join('')
      // 渲染选择题
      $('.list').innerHTML = data.map((item, index) => {
        return `
          <div class="list-item">
            <div class="no">${index + 1}</div>
            <div class="question-content">
              <h3>(${item.score}分) ${item.question}</h3>
              <ul>
                ${item.options.map((option, i) => {
                  // 把题目的序号和选项的值存到 input 中
                  return `
                    <li>
                      <input type="radio" name="${index}" id="${index}-${i}" data-no="${index}" value="${optionsLetter[i]}">
                      <label for="${index}-${i}">${optionsLetter[i]}. ${option}</label>
                    </li>
                  `
                }).join('')}
              </ul>
            </div>
          </div>
        `
      }).join('')
    }
    // 初始化渲染
    initRender()

    // 倒计时
    function countDown({ count, el, success }) {
      const addZero = n => n >= 10 ? n : '0' + n
      const renderCount = () => {
        const h = addZero(Math.floor(count / 1000 / 60 / 60))
        const m = addZero(Math.floor(count / 1000 / 60 % 60))
        const s = addZero(Math.floor(count / 1000 % 60))
        el.innerHTML = `${h}:${m}:${s}`
      }
      renderCount()
      const timer = setInterval(() => {
        count -= 1000
        if (count <= 0) {
          clearInterval(timer)
          // 倒计时结束执行 success 回调函数
          success && success()
        }
        renderCount()
      }, 1000)
      // 返回清除定时器的函数
      return () => {
        clearInterval(timer)
      }
    }

    // 创建定时器
    const clearTimer = countDown({
      count: 500000,
      el: $('.count-down'),
      success: () => {
        submit()
      }
    })

    // 提交
    function submit() {
      clearTimer()
      // 计算总分，展示选择错误的选项
      let total = 0
      data.forEach((val, index) => {
        if (result[index] === val.result) {
          total += val.score
        } else {
          gets('.card button')[index].classList.add('red')
          const p = document.createElement('p')
          p.style.color = 'green'
          p.innerHTML = `正确答案: ${val.result}`
          gets('.list-item')[index].appendChild(p)
        }
      })
      // 展示总分弹窗
      $('.dialog h4 span').innerHTML = total
      $('.dialog').classList.add('show')
      // 禁用提交按钮
      $('.submit').innerHTML = '已交卷'
      $('.submit').disabled = true
      // 禁用选择按钮
      gets('.list input').forEach(inp => inp.disabled = true)
      // 禁止页面滚动
      document.documentElement.style.cssText = 'width: 100vw;height:100vh;overflow:hidden;'
    }

    // 跳转题目
    $('.num').addEventListener('click', (e) => {
      if (e.target.nodeName === 'BUTTON') {
        // 获取点击的按钮下标
        const index = e.target.getAttribute('data-index')
        // 获取对应的题目到页面顶部的距离
        const qTop = gets('.list-item')[index].offsetTop
        document.documentElement.scrollTop = qTop
      }
    })

    // 选择题目
    gets('.list input').forEach(inp => {
      inp.addEventListener('change', () => {
        // 获取选择的题目序号
        const index = inp.getAttribute('data-no')
        // 存结果
        result[index] = inp.value
        // 让对应的按钮高亮
        gets('.num button')[index].classList.add('active')
      })
    })


    // 提交
    $('.submit').addEventListener('click', submit)

    // 弹窗确定按钮
    $('.dialog button').addEventListener('click', () => {
      $('.dialog').classList.remove('show')
      document.documentElement.style.cssText = 'width: auto;height:auto;overflow:auto;'
    })

    function $(el) {
      return document.querySelector(el)
    }
    function gets(el) {
      return [...document.querySelectorAll(el)]
    }

 





  </script> -->
  <script src="./js/data.js"></script>
  <script src="./js/答题卡.js"></script>


</body>
</html>
<!-- 产品经理：提需求
UE设计：设计交互图
UI设计：设计页面
前端开发：还原页面，添加功能
后端开发：处理数据
测试：测试需求功能 -->